<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div class="app">
  <div>
    <h1>Index.html</h1>
  </div>
  <div>
    <div id="msg"></div>
  </div>
  <div>WebSocket地址:<br>
    <input id="wsUrl" class="text-x" type="text" value="ws://localhost:8020/ws?token=xxxxx"/>
    <button id="b1" onclick="wsopen()">连接</button>
    <button id="b2" onclick="wsclose()">断开连接</button>
  </div>
  <div>
    <div>ws发送文本框<br><input id="wsMsg" class="text-x" type="text"/>
      <button id="b3" onclick="wssend()">ws发送</button>
    </div>
    <div>http发送文本框<br><input id="httpMsg" class="text-x" type="text"/>
      <button id="b4" onclick="httpsend()">http发送</button>
    </div>
  </div>
  <div>
    <form name="form" action="/upload" method="post" enctype="multipart/form-data">
      <h1>采用multipart提供的file.transfer方法上传文件</h1>
      <input type="file" name="file">
      <input type="submit" value="upload"/>
    </form>
  </div>
</div>
</body>
<style type="text/css">
  .text-x {
    border: 1px solid seashell;
    background: transparent;
    -webkit-appearance: none;
    width: 500px;
    height: 20px;
  }
</style>
<script type="text/javascript">
  var ws = null;

  function wsopen() {
    var wsUrl = document.getElementById("wsUrl").value;
    ws = new WebSocket(wsUrl);

    ws.onopen = function (evt) {
      console.log("Connection open ...");
      ws.send("Hello WebSockets!");
    };

    ws.onmessage = function (evt) {
      console.log("Received Message: " + evt.data);
      document.getElementById("msg").innerText = evt.data;
    };

    ws.onclose = function (evt) {
      console.log("Connection closed.");
      document.getElementById("b1").style.disabled = disabled
    };
    document.getElementById("b1").style = undefined
  }

  function wssend() {
    var wsMsg = document.getElementById("wsMsg").value;
    ws.send(wsMsg);
  }

  function httpsend() {
    var wsMsg = document.getElementById("httpMsg").value;
    //创建xhr对象
    var xhr;
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    } else {
      xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //发送请求
    xhr.open('get', '/sendMsg?msg=' + wsMsg, false);
    xhr.send();
    //同步接受响应
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        //实际操作
        console.log(xhr.responseText);
      }
    }
  }

  function wsclose() {
    ws.close();
    document.getElementById("b1").style = undefined
  }
</script>
</html>